<template>
	<view class="content">
		<view>
		<!-- 保存图片  a标签-->	
			<image class="logo" src="/static/2.jpg" id="picurl" mode="aspectFit"></image>
			<!-- a标签 按钮样式-->
			<view class="btn-style">
				<!-- a标签保存图片 -->
				<a href="/static/2.jpg" download="girl.jpg" style="text-decoration: none;color: aliceblue;font-size: 18px;">保存图片</a>
			</view>
		<!--uview-plus 操作菜单 -->	
			<view>
				<up-action-sheet :actions="list" :title="title" v-model:show="show" @select="selectClick" 
					description="22222" cancelText="取消按钮" round="12" wrapMaxHeight="200px" lang="zh_CN"></up-action-sheet>
				<button @click="show=true" class="btn-style" style="color: #fff;font-size:16px;">打开ActionSheet</button>
			</view>
		<!-- 显示几行 -->	
			<view style="width: 300px;margin: 0 auto;">
				<text class="up-line-1">是日也，天朗气清，惠风和畅，仰观宇宙之大，俯察品类之盛</text>
			</view>
		<!-- 模态框 -->	
			<view>
				<!-- 异步关闭 asyncClose 只对"确定"按钮起作用-->
			    <up-modal v-model:show="show2" :title="title" :content="content" :asyncClose="true" @confirm="confirm" 
					:closeOnClickOverlay="true" width="500rpx" :zoom="true" confirmText="yes" confirmColor="#ffaa00"
					 cancelText="no" cancelColor="#55aaff" showCancelButton buttonReverse negativeTop="200" contentTextAlign="center">
					<!-- 传入富文本内容 -->
					<view>
						<rich-text :nodes="content1"></rich-text>
					</view>
			      <template #confirm-button>
			        <button open-type="getUserInfo" @getuserinfo="getuserinfo">确定</button>
			      </template>
			    </up-modal>
			    <up-button @click="show2=true" class="btn-style" style="color: #fff;font-size:16px;margin-top: 1rem;">打开modal</up-button>
			</view>
		<!-- 边框 -->	
			<!-- up-border表示给元素添加四周的边框 -->
			<view class="up-border" style="width: 300px;padding: 10px;margin: 0 auto;margin-top: 1rem;">
				夫人之相与，俯仰一世，或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外
			</view>
		<!-- uview-plus的color色彩 不生效-->
			<view>
				<text class="color-test">color色彩</text>
				<text class="color-test2">color色彩</text>
				<text class="color-test3">color色彩</text>
				<text class="color-test4">color色彩</text>
			</view>
		<!-- icon图标 -->
			<view>
				<up-icon name="fingerprint" label="uview-plus" labelPos="bottom" labelSize="14px" labelColor="#2979ff" space="0px"
				color="#2979ff" size="40"></up-icon>
				<up-icon name="/static/logo.png" label="uni-app" labelPos="bottom" labelSize="14px" labelColor="#29af1a" space="3px"
				size="35" style="margin-top: 1rem;"></up-icon>
			</view>
		<!--Image 图片 -->
			<view>
			</view>
		<!-- Tabbar 底部导航栏 -->
			<up-tabbar :value="value1" @change="change1" :fixed="true" :placeholder="true" inactiveColor="#ffaa00" activeColor="#2979ff">
				<up-tabbar-item @click="click1">
					<template #active-icon>
						<up-icon name="home" label="首页" labelPos="bottom" labelSize="11px" labelColor="#2979ff" space="2px"
						color="#2979ff" size="22" top="-2"></up-icon>
					</template>
					<template #inactive-icon>
						<up-icon name="home" label="首页" labelPos="bottom" labelSize="11px" labelColor="#ffaa00" space="2px"
						color="#ffaa00" size="22" top="-2"></up-icon>
					</template>
				</up-tabbar-item>
				<up-tabbar-item text="动态" icon="photo" @click="click1" badge="3"></up-tabbar-item>
				<up-tabbar-item text="直播" icon="play-right" @click="click1" dot></up-tabbar-item>
				<up-tabbar-item text="我的" icon="account" @click="click1" ></up-tabbar-item>
			</up-tabbar>
		<!-- 手写签名 -->
			<view style="width: 100%;height: 100vh;">
				<canvas ></canvas>
				<button @click="cancel()">取消</button>
				<button @click="save()">保存</button>
			</view>
			<view style="height: 50px;">
				111
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad, onShow } from "@dcloudio/uni-app"; 

const show = ref(false);
const show2 = ref(false);
const title = ref('标题')
const list = ref([
  {
  	name: '点赞',  
  	subname: "选项一描述", 
  	color: '#ffaa7f',  
  	fontSize: '20',
  },
  {
  	name: '设计费',  
  	subname: "水晶湖郡单身快乐", 
  	color: '#55aa00',  
  	fontSize: '18',
  },
  {
    name: '选项三',
  	color: '#ffaaff',
  	fontSize: '18',
  },
  {
    name: '选项四禁用',
  					disabled: true  
  },
  {
    name: '开启load加载',// 开启后文字不显示 
  					loading: true 
  }
]);
const content = ref('点击确定进行授权'); 
const content1 = ref(`空山新雨后<br>天气晚来秋`);  
const value1 = ref(0)
// 配置内容
const config = {
    width: 400, // 宽度
    height: 200, // 高度
    lineWidth: 5, // 线宽
    strokeStyle: 'red', // 线条颜色
    lineCap: 'round', // 设置线条两端圆角
    lineJoin: 'round', // 线条交汇处圆角
}


// uni-app 的生命周期钩子  
onLoad((opt) => {  
    // 页面加载时执行的代码  
    console.log('页面加载了', opt);  
});  
onShow(() => {  
    // 页面显示时执行的代码  
    console.log('页面显示了');  
});  

// 方法
function selectClick(index){
	console.log(index) 
}
const getuserinfo = (res) => {
  console.log(res);
}
const confirm = () => {  
    setTimeout(() => {  
        // 3秒后自动关闭  
        show2.value = false;  
    }, 1000);  
}; 
function click1(e){
	value1.value = e
	console.log('click1', e);
}

// 获取canvas 实例
    const canvas = document.querySelector('canvas')
    // 设置宽高
    canvas.width = config.width
    canvas.height = config.height
    // 设置一个边框
    canvas.style.border = '1px solid #000'
    // 创建上下文
    const ctx = uni.createCanvasContext('2d')
 
    // 设置填充背景色
    ctx.fillStyle = 'transparent'
    // 绘制填充矩形
    ctx.fillRect(
        0, // x 轴起始绘制位置
        0, // y 轴起始绘制位置
        config.width, // 宽度
        config.height // 高度
    );
 
    // 保存上次绘制的 坐标及偏移量
    const client = {
        offsetX: 0, // 偏移量
        offsetY: 0,
        endX: 0, // 坐标
        endY: 0
    }
 
    // 判断是否为移动端
    const mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent))
 
    // 初始化
    const init = event => {
        // 获取偏移量及坐标
        const { offsetX, offsetY, pageX, pageY } = mobileStatus ? event.changedTouches[0] : event 
 
        // 修改上次的偏移量及坐标
        client.offsetX = offsetX
        client.offsetY = offsetY
        client.endX = pageX
        client.endY = pageY
 
        // 清除以上一次 beginPath 之后的所有路径，进行绘制
        ctx.beginPath()
        // 根据配置文件设置相应配置
        ctx.lineWidth = config.lineWidth
        ctx.strokeStyle = config.strokeStyle
        ctx.lineCap = config.lineCap
        ctx.lineJoin = config.lineJoin
        // 设置画线起始点位
        ctx.moveTo(client.endX, client.endY)
        // 监听 鼠标移动或手势移动
        window.addEventListener(mobileStatus ? "touchmove" : "mousemove", draw)
    }
    // 绘制
    const draw = event => {
        // 获取当前坐标点位
        const { pageX, pageY } = mobileStatus ? event.changedTouches[0] : event
        // 修改最后一次绘制的坐标点
        client.endX = pageX
        client.endY = pageY
 
        // 根据坐标点位移动添加线条
        ctx.lineTo(pageX , pageY )
 
        // 绘制
        ctx.stroke()
    }
    // 结束绘制
    const cloaseDraw = () => {
        // 结束绘制
        ctx.closePath()
        // 移除鼠标移动或手势移动监听器
        window.removeEventListener("mousemove", draw)
    }
    // 创建鼠标/手势按下监听器
    window.addEventListener(mobileStatus ? "touchstart" : "mousedown", init)
    // 创建鼠标/手势 弹起/离开 监听器
    window.addEventListener(mobileStatus ? "touchend" :"mouseup", cloaseDraw)
    
    // 取消-清空画布
    const cancel = () => {
        // 清空当前画布上的所有绘制内容
        ctx.clearRect(0, 0, config.width, config.height)
    }
    // 保存-将画布内容保存为图片
    const save = () => {
        // 将canvas上的内容转成blob流
        canvas.toBlob(blob => {
            // 获取当前时间并转成字符串，用来当做文件名
            const date = Date.now().toString()
            // 创建一个 a 标签
            const a = document.createElement('a')
            // 设置 a 标签的下载文件名
            a.download = `${date}.png`
            // 设置 a 标签的跳转路径为 文件流地址
            a.href = URL.createObjectURL(blob)
            // 手动触发 a 标签的点击事件
            a.click()
            // 移除 a 标签
            a.remove()
        })
    }
</script>

<!-- 不带scoed属性的其他样式 -->
<!--<style lang="scss">
page {
	background-color: #eee;
}
</style>-->

<!-- 带scoed属性的其他样式 -->
<style lang="scss">
	.content {
		width: 100%;
		// padding: 0 auto;
		// display: flex;
		height: 100vh;
		/* flex-direction: column; */
		// align-items: center;
		// justify-content: center;
		text-align: center;
		// background-color: #e5e5e5;
	}
	.logo {
		height: 600rpx;
		width: 700rpx;
		margin-top: 1rem;
		/* margin-top: 0%; */
		// margin:0 auto;
		/* margin-bottom: 50rpx; */
	}
	.btn-style{
		margin:0 auto;
		margin-top: 1rem;
		width: 10rem;
		height: 2.5rem;
		background-color: #86c2dd;
		line-height:2.5rem;
		text-align: center;
		border-radius: 5px;
	}
	.color-test{
		color:$uni-color-primary
	}
	.color-test2{
		color:$uni-color-warning
	}
	.color-test3{
		color:$uni-color-success
	}
	.color-test4{
		color:$uni-color-error
	}
</style>
